<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>聊天对话框 - 回车键发送信息</title>
</head>
<link rel="stylesheet" href="css/chat.css">
<!-- <script src="js/chat.js"></script> -->

<body>
    <div id="box">
        <div class="cont">
            <p>在吗</p>
            <p>你好</p>
            <p>在吗</p>
            <p>你好</p>
        </div>
        <form>
            <textarea id="txt" cols="35" rows="3"></textarea>
            <input type="button" id="btn" value="发送">
        </form>
    </div>
</body>
<script>
    var otxt = document.getElementById("txt")
    var obtn = document.getElementById("btn")
    var ocont = document.querySelector(".cont")
    btn.onclick = function () {
        fn()
    }

    otxt.onkeydown = function (eve) {
        var e = eve || window.event;
        if (e.keyCode == 13) {
            fn()
        }
    }

    function fn() {
        var p = document.createElement("p");
        p.innerHTML = otxt.value;
        ocont.appendChild(p);
        // p.style.float="right";
        // p.className="#box .cont p"
        otxt.value = "";
        ocont.scrollTop = ocont.scrollHeight
    }
</script>

</html>